// pages/healthreport/healthreport.js
const api = require('../../util')
const regeneratorRuntime = require('../../runtime')
const app = getApp()
var pageArr = []
import * as echarts from '../../ec-canvas/echarts';

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  var option = {
    //   title: {
    // text: '数据统计',
    // left: 'center'
    //   },
    color: ["#37A2DA"],
    grid: {
      left: 10, //折线图距离左边距
      right: 10, //折线图距离右边距
      top: 25, //折线图距离上边距
      bottom: 20,
      containLabel: true
    },
    tooltip: { // 取消提示框 在调试时 发现弹框有阴影 无法取消 解决办法是删除初始化中的参数dpr  但会导致在真机中图表虚化问题  解决办法是在页面增加force-use-old-canvas="true" 但会导致图表层级过高 解决办法是使用cover-view 所以未使用
      trigger: "axis",
      axisPointer: {
        type: "none"
      }
    },
    dataZoom: [
      // x轴
      {
        // 设置滚动条的隐藏与显示
        show: pageArr[pageArr.length - 1].data.echartsdata2.length>5?true:false,
        // 设置滚动条类型
        type: "slider",
        showDataShadow: false, // 图表阴影走势
        // 设置背景颜色
        backgroundColor: "rgb(255, 255, 255)",
        // 设置选中范围的填充颜色
        fillerColor: "rgb(255, 255, 255)",
        // 设置边框颜色
        borderColor: "rgb(255, 255, 255)",
        // 是否显示detail，即拖拽时候显示详细数值信息
        showDetail: false,
        // 数据窗口范围的起始数值
        startValue: 0,
        // 数据窗口范围的结束数值（一页显示5条数据）
        endValue: 4,
        // empty：当前数据窗口外的数据，被设置为空。
        // 即不会影响其他轴的数据范围
        filterMode: "empty",
        // 设置滚动条宽度，相对于盒子宽度
        width: "100%",
        // 设置滚动条高度
        height: 10,
        // 设置滚动条显示位置
        left: "left",
        // 是否锁定选择区域（或叫做数据窗口）的大小
        zoomLoxk: true,
        // 控制手柄的尺寸
        handleSize: 0,
        // dataZoom-slider组件离容器下侧的距离
        bottom: 0,
      },
      {
        // 没有下面这块的话，只能拖动滚动条，
        // 鼠标滚轮在区域内不能控制外部滚动条
        type: "inside",
        // 滚轮是否触发缩放
        zoomOnMouseWheel: false,
        // 鼠标滚轮触发滚动
        moveOnMouseMove: true,
        moveOnMouseWheel: true,
      },
      // // y轴
      // {
      //   // 设置滚动条的隐藏或显示
      //   show: true,
      //   // 设置类型
      //   type: "slider",
      //   showDataShadow: false, // 图表阴影走势
      //   // 设置背景颜色
      //   backgroundColor: "rgb(255, 255, 255)",
      //   // 设置选中范围的填充颜色
      //   fillerColor: "rgb(255, 255, 255)",
      //   // 设置边框颜色
      //   borderColor: "rgb(255, 255, 255)",
      //   // 是否显示detail，即拖拽时候显示详细数值信息
      //   showDetail: false,
      //   // 数据窗口范围的起始数值
      //   startValue: 0,
      //   // 数据窗口范围的结束数值（一页显示多少条数据）
      //   endValue: 25,
      //   // 控制哪个轴，如果是number表示控制一个轴，
      //   // 如果是Array表示控制多个轴。此处控制第二根轴
      //   yAxisIndex: [0, 1],
      //   // empty：当前数据窗口外的数据，被设置为空。
      //   // 即不会影响其他轴的数据范围
      //   filterMode: "empty",
      //   // 滚动条高度
      //   width: 0,
      //   // 滚动条显示位置
      //   height: "100%",
      //   // 距离右边
      //   right: 15,
      //   // 控制手柄的尺寸
      //   handleSize: 0,
      //   // 是否锁定选择区域（或叫做数据窗口）的大小
      //   zoomLoxk: true,
      //   // 组件离容器上侧的距离
      //   // 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
      //   top: "top",
      // },
      // {
      //     // 没有下面这块的话，只能拖动滚动条，
      //     // 鼠标滚轮在区域内不能控制外部滚动条
      //     type: "inside",
      //     // 控制哪个轴，如果是number表示控制一个轴，
      //     // 如果是Array表示控制多个轴。此处控制第二根轴
      //     yAxisIndex: [0, 1],
      //     // 滚轮是否触发缩放
      //     zoomOnMouseWheel: false,
      //     // 鼠标移动能否触发平移
      //     moveOnMouseMove: true,
      //     // 鼠标滚轮能否触发平移
      //     moveOnMouseWheel: true,
      // },
    ],
    xAxis: {
      name: '',
      type: 'category',
      // boundaryGap: false,
      boundaryGap: [0, 0],
      data: pageArr[pageArr.length - 1].data.echartsdata1,
      axisTick: {
        //x轴刻度相关设置
        alignWithLabel: true,
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#d6ebff'
        }
      },
      axisLabel: {
        //横坐标最后的标注颜色变深
        // interval: 0,
        show: true,
        textStyle: {
          color: '#34469b',
          fontSize: '14',
        }
      },
      show: true
    },
    yAxis: {
      name: '',
      x: 'center',
      type: 'value',
      // max: 30,
      // interval: 6,
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      //设置y轴字体样式
      axisLabel: {
        show: true,
        textStyle: {
          color: '#34469b',
          fontSize: '14',
        }
      },
      show: true
    },
    series: [{
      name: '得分',
      type: 'line',
      smooth: true,
      silent: true, // 禁止点击
      data: pageArr[pageArr.length - 1].data.echartsdata2,
      //设置拐点大小,图形类型，旋转角度，缩放同比，位置偏移，是否显示
      symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', 'emptyCircle'
      symbolSize: 10,
      showSymbol: true, //false, tooltip hover时候才显示出来
      tooltip: {
        show: false
      },
      itemStyle: {
        color: function (params) {
          // 设置每个折点的颜色
          return pageArr[pageArr.length - 1].data.echartsdata3[params.dataIndex].color
        },
        emphasis: {
          // color: '',//hover拐点颜色定义
          borderWidth: 1, //拐点边框大小
          //拐点边框颜色
          borderColor: function (params) {
            return pageArr[pageArr.length - 1].data.echartsdata3[params.dataIndex].color
          },
        }
      },
    }]
  };
  chart.setOption(option);
  return chart;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    number: 0,
    statusBarHeight: app.globalData.statusBarHeight,

    height: 0,
    arr: [],
    index: 0,
    tabs: ['近1月', '近3月', '近6月', '近一年'],
    tabactive: 0,
    list: [],
    echartsdata1: [], // 时间
    echartsdata2: [], // 值
    echartsdata3: [], // 折点颜色
    echartsdata4: [], // 图例
    text: '',
    ec: {
      onInit: initChart
    },
    echartstype: false,
    startX:0,
    endX:0,
    moveFlag: false,
    scrollLeft: 0
  },
  // 获取测评类别
  getSubjectCategory() {
    var that = this
    api.http('/Subject/getSubjectCategory', 'POST', false, {}, function (res) {
      if (res.code == 200) {
        if (wx.getStorageSync(app.globalData.miniProgramtype + 'bselector') == '') {
          wx.setStorageSync(app.globalData.miniProgramtype + 'bselector', 0)
        }
        for (let j = 0; j < res.data.length; j++) {
          if (res.data[wx.getStorageSync(app.globalData.miniProgramtype + 'bselector')].id == res.data[j].id) {
            that.setData({
              index: j,
              arr: res.data
            })
          }
        }
        that.funecharsarr()
        that.evaluationRecords()
      }
    })
  },
  // 获取评估记录
  evaluationRecords() {
    var that = this
    api.http('/Subject/evaluationRecords', 'POST', false, {
      category_id: this.data.arr[this.data.index].id
    }, function (res) {
      if (res.code == 200) {
        that.setData({
          list: res.data
        })
      }
    })
  },
  before() {
    if (getCurrentPages().length != 1) {
      wx.navigateBack({
        delta: 1
      })
    } else {
      wx.switchTab({
        url: '/pages/my/my',
      })
    }
  },
  // 下拉触发
  arrChange(e) {
    var that = this
    wx.setStorageSync(app.globalData.miniProgramtype + 'bselector', e.detail.value)
    this.setData({
      echartstype: false,
      index: e.detail.value
    }, () => {
      // echarts数据
      that.funecharsarr()
      // 评估记录
      that.evaluationRecords()
    })
  },
  // 获取echarts数据
  funecharsarr() {
    this.setData({
      echartsdata4: ''
    })
    var tabactive = 0,that = this
    if (this.data.tabactive == 0) { // 选中的近几个月份的index
      tabactive = 1
    } else if (this.data.tabactive == 1) {
      tabactive = 3
    } else if (this.data.tabactive == 2) {
      tabactive = 6
    } else if (this.data.tabactive == 3) {
      tabactive = 12
    }
    let now = new Date(); // 当前时间
    let nowTime = now.getTime(); //当前的时间戳
    let oneDayTime = 24 * 3600 * 1000; //一天的总毫秒数
    let start = ""; //开始日期
    let end = ""; //结束日期
    let num = 1 * tabactive
    // （最近num个月myDate[0]开始和myDate[1]结束时间） 
    let mouth = nowTime - oneDayTime * 30 * num; //oneDayTime * 30 代表一个月的总毫秒数
    start = now.setTime(mouth);
    end = new Date();
    var myDate = [this.formatDate(start), this.formatDate(end)];

    api.http('/subject/lineChart', 'POST', false, {
      category_id: that.data.arr[that.data.index].id,
      start_date: myDate[0],
      end_date: myDate[1]
    }, function (res) {
      if (res.code == 200) {
        var echartsdata2 = []
        for (let i = 0; i < res.data.coordinate.length; i++) {
          echartsdata2.push(res.data.coordinate[i].y)
        }
        that.setData({
          echartsdata1: res.data.date, // 时间
          echartsdata2, // 值
          echartsdata3: res.data.coordinate, // 折点颜色
          echartsdata4: res.data.color_annotation, // 图例
          text: res.data.text,
        }, () => {
          pageArr = getCurrentPages()
          that.setData({
            ec: {
              onInit: initChart
            },
            echartstype: true
          }, () => {
            // initChart()
          })
        })
      }
    })
  },
  //格式化日期函数（最终格式yyyy-MM-dd）
  formatDate(date) {
    let myDate = new Date(date);
    let year = myDate.getFullYear();
    let month = myDate.getMonth() + 1;
    let weekday = myDate.getDate();
    if (month < 10) {
      month = "0" + month;
    }
    if (weekday < 10) {
      weekday = "0" + weekday;
    }
    return year + "-" + month + "-" + weekday;
  },
  // tab时间切换
  tabfun(e) {
    this.setData({
      tabactive: e.currentTarget.dataset.index,
      echartstype: false
    }, () => {
      this.funecharsarr()
    })
  },
  /**
   * 触摸开始事件
   * */ 
  touchStart(e) {
    // this.data.startX = e.touches[0].pageX; // 获取触摸时的原点
    // this.data.moveFlag = true;
  },

  /**
   * 触摸移动事件
   * */ 
  touchMove(e) {
    // var tabactive = this.data.tabactive
    // this.data.endX = e.touches[0].pageX; // 获取触摸时的原点
    // if ( this.data.moveFlag) {
    //   if ( this.data.endX -  this.data.startX > 80) {
    //     this.data.moveFlag = false;
    //     if (tabactive<this.data.tabs.length-1) {
    //       tabactive = tabactive+1
    //     } else {
    //       return
    //     }
    //     this.setData({
    //       tabactive,
    //       echartstype: false
    //     }, () => {
    //       this.funecharsarr()
    //     })
    //   }
    //   if ( this.data.startX -  this.data.endX > 80) {
    //     this.data.moveFlag = false;
    //     if (tabactive>0) {
    //       tabactive = tabactive-1
    //     } else {
    //       return
    //     }
    //     this.setData({
    //       tabactive,
    //       echartstype: false
    //     }, () => {
    //       this.funecharsarr()
    //     })
    //   }
    // }
  },
  /**
   * 触摸结束事件
   * */ 
  touchEnd () {
    // this.data.moveFlag = true; // 回复滑动事件
  },
  scroll:function(e){
    var scrollLeft=e.detail.scrollLeft;
    this.setData({scrollLeft:scrollLeft})
  },
  // 评估
  toevaluation() {
    // 提示完善用户信息
    var that = this
    api.http('/user/isImproveInformation', 'POST', false, {}, function (res) {
      if (res.code == 200) {
        if (res.data.is_complete === 0) {
          wx.showModal({
            title: '提示',
            content: '个人信息未完善，是否前往填写个人信息？',
            success: function (sm) {
              if (sm.confirm) {
                wx.navigateTo({
                  url: '/pages/information/information',
                })
              } else if (sm.cancel) {
                wx.navigateTo({
                  url: '/pages/evaluation/evaluation?category_id=' + that.data.arr[that.data.index].id,
                })
              }
            }
          })
        } else {
          wx.navigateTo({
            url: '/pages/evaluation/evaluation?category_id=' + that.data.arr[that.data.index].id,
          })
        }
      }
    })
  },
  // 跳转评估结果
  toresult(e) {
    wx.navigateTo({
      url: '/pages/result/result?evaluation_result_id=' + e.currentTarget.dataset.evaluation_result_id + '&category_id=' + this.data.arr[this.data.index].id + '&title=' + this.data.arr[this.data.index].title,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.setData({
      echartstype: false
    }, () => {
      if (wx.pageScrollTo) {
        wx.pageScrollTo({
          scrollTop: 0
        })
      } else {
        wx.showModal({
          title: '提示',
          content: '当前微信版本过低，无法滚动回顶部，请升级到最新微信版本后重试。'
        })
      }
      let query = wx.createSelectorQuery()
      query.select('.box').boundingClientRect((rect) => {
        this.setData({
          height: wx.getSystemInfoSync().windowHeight - rect.top - 60,
        })
      }).exec()
      pageArr = getCurrentPages()
      if (wx.getStorageSync(app.globalData.miniProgramtype + 'access_token') == '') {
        app.wxlogin().then(() => {
          this.getSubjectCategory()
        })
      } else {
        this.getSubjectCategory()
      }
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  // 分享到朋友圈
  onShareTimeline(){
    return {
      title: '健康报告',
      // query: 'id=' + this.id,
      // imageUrl: ''
    }
  }
})